/**
 * ErrorMessage Component
 * 
 * Enhanced error message display with retry functionality
 */

import { AlertCircle, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

export interface ErrorMessageProps {
  title?: string;
  message: string;
  onRetry?: () => void;
  className?: string;
  variant?: 'default' | 'compact';
}

export function ErrorMessage({
  title = '发生错误',
  message,
  onRetry,
  className,
  variant = 'default',
}: ErrorMessageProps) {
  if (variant === 'compact') {
    return (
      <div className={cn(
        'flex items-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/30 text-sm',
        className
      )}>
        <AlertCircle className="w-4 h-4 text-destructive shrink-0" />
        <span className="text-destructive/90 flex-1">{message}</span>
        {onRetry && (
          <Button
            variant="ghost"
            size="sm"
            onClick={onRetry}
            className="h-7 px-2 hover:bg-destructive/20"
          >
            <RefreshCw className="w-3 h-3" />
          </Button>
        )}
      </div>
    );
  }

  return (
    <div className={cn(
      'flex items-start gap-3 p-4 rounded-lg bg-destructive/10 border border-destructive/30',
      className
    )}>
      <div className="p-2 rounded-lg bg-destructive/20 shrink-0">
        <AlertCircle className="w-5 h-5 text-destructive" />
      </div>
      
      <div className="flex-1 min-w-0">
        <h4 className="font-semibold text-destructive mb-1">
          {title}
        </h4>
        <p className="text-sm text-destructive/80 leading-relaxed">
          {message}
        </p>
      </div>
      
      {onRetry && (
        <Button
          variant="outline"
          size="sm"
          onClick={onRetry}
          className="shrink-0 border-destructive/30 hover:bg-destructive/20 hover:border-destructive/50"
        >
          <RefreshCw className="w-4 h-4 mr-2" />
          重试
        </Button>
      )}
    </div>
  );
}

